<template>
    <div class="layadmin-user-login layadmin-user-display-show">
        <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" media="all">
        <link id="layuicss-layer" rel="stylesheet" type="text/css" href="static/layui/css/modules/layer/default/layer.css" />
        <link id="layuicss-layuiAdmin" rel="stylesheet" type="text/css" href="static/layui/style/admin.css" />
        <link rel="stylesheet" type="text/css" href="static/layui/style/login.css" />

        <div id="LAY-user-login">
            <div class="layadmin-user-login-main">
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <h2>账号登录</h2>
                    <p>坡特云后台管理系统</p>
                </div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                        <input type="text" name="account" id="LAY-user-login-username" lay-verify="required" placeholder="手机号/用户名/邮箱" class="layui-input" v-model="login.account"/>
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                        <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input" v-model="login.password"/>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                                <input type="text" name="verifyCode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input" v-model="login.verifyCode"/>
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 9px;">
                                    <img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 20px;">
                        <Input type="text" name="remember" lay-skin="primary" title="记住密码" style="display: none;" v-model="login.remember"/>
                        <div id="remember" class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="remember()">
                            <span>记住密码</span>
                            <i class="layui-icon layui-icon-ok"></i>
                        </div>
                        <a href="#/forget" target="_blank" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit" @click="sign_on()">登 入</button>
                    </div>
                    <div class="layui-trans layui-form-item layadmin-user-login-other">
                        <label>社交账号登入</label>
                        <a href="javascript:"><i class="layui-icon layui-icon-login-qq"></i></a>
                        <a href="javascript:"><i class="layui-icon layui-icon-login-wechat"></i></a>
                        <a href="javascript:"><i class="layui-icon layui-icon-login-weibo"></i></a>

                        <a href="#/reg" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
                    </div>
                </div>
            </div>

            <div class="layui-trans layadmin-user-login-footer">
                <p>© 2018 <a href="http://www.potyun.com/" target="_blank">potyun.com</a></p>
            </div>
        </div>
    </div>
</template>

<script>
    /**
     * ● vue官网 使用介绍文档
     * https://cn.vuejs.org/guide/introduction.html
     *
     * ● vue官网 API 参考文档
     * https://cn.vuejs.org/api/
     *
     * ● vue八大生命周期
     * https://www.cnblogs.com/qianduan-Wu/p/16917161.html
     *
     * ● vue中created、beforeMount、mounted、computed、watch、methods区别与执行顺序：
     * https://zhuanlan.zhihu.com/p/474610997
     *
     * ● vue生命周期及router按需加载：
     * https://blog.51cto.com/u_15127513/4198980
     */
    export default {
        /**
         * Props 声明
         * https://cn.vuejs.org/guide/components/props.html#prop-passing-details
         *
         * 一个组件需要显式声明它所接受的 Props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。
         * Props 需要使用 props 选项来定义。
         */
        props: [],
        /**
         * 组件注册
         * https://cn.vuejs.org/guide/components/registration.html
         *
         * （1）一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。
         * （2）组件注册有两种方式：全局注册和局部注册。
         * （3）局部注册需要使用 components 选项。
         */
        components: {},
        /**
         * data() 返回的属性将会成为响应式的状态，并且暴露在 `this` 上。
         */
        data() {
            return {
                login: {
                    account: "",
                    password: "",
                    verifyCode: "",
                    remember: "0"
                },
            };
        },
        /**
         * created 执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。
         * created钩子函数 在模板渲染成html前调用，通常用来 初始化某些属性值，然后再渲染成视图。
         */
        created() {
            console.log("created");
        },
        /**
         * beforeMount 这一步的时候，模版已经在内存中编译好了，但是尚未挂载到页面中去。
         */
        beforeMount() {
            console.log("beforeMount");
        },
        /**
         * computed 是在DOM执行完成后立马执行（如：赋值）。
         */
        computed: {
        },
        /**
         * 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
         * DOM操作一般是在mounted钩子函数中进行。
         * mounted 是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行。
         */
        mounted() {
            console.log("mounted");
            document.querySelector('body').setAttribute('style', 'background-color:#f2f2f2');
        },
        /**
         * 侦听器
         * https://cn.vuejs.org/guide/essentials/watchers.html
         *
         * 使用 watch 选项，在每次响应式属性发生变化时触发一个函数。
         * 默认加载的时候先 computed 再 watch，不执行 methods；等触发某一事件后，则是 先 methods 再 watch。
         */
        watch: {},
        /**
         * methods 方法有一定的触发条件，如click等。
         * 所有方法都应该在 methods 里定义，在 mounted 或 created 里面使用 this 调用，通过这种方式 实现初始化。
         */
        methods: {
            sign_on() {
                // this.$Notice.info({desc: "正在登录..."});
                // this.$Notice.success({desc: "登录成功！"});
                // this.$Notice.error({desc: "登录失败！"});

                if (this.login.account.trim().length <= 0) {
                    this.$Notice.error({desc: "请输入`手机号/用户名/邮箱`"});
                    return;
                }
                // if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(this.login.account)) {
                //     this.$Notice.error({desc: "`手机号/用户名/邮箱`不能有特殊字符"});
                //     return;
                // }
                if (/(^_)|(__)|(_+$)/.test(this.login.account)) {
                    this.$Notice.error({desc: "`手机号/用户名/邮箱`首尾不能出现下划线`_`"});
                    return;
                }
                // if (/^\d+\d+\d$/.test(this.login.account)) {
                //     this.$Notice.error({desc: "`手机号/用户名/邮箱`不能全为数字"});
                //     return;
                // }
                if (!/^[\S]{6,12}$/.test(this.login.password)) {
                    this.$Notice.error({desc: "`密码`必须6到12位，且不能出现空格"});
                    return;
                }
                if (this.login.verifyCode.trim().length <= 0) {
                    this.$Notice.error({desc: "请输入`图形验证码`"});
                    return;
                }

                this.$http
                    .post("/basic/api/login", this.login)
                    .then(res => {
                        this.$Notice.success({desc: "登录成功"});
                        console.log(res);
                    })
                    .catch(err => {
                        this.$Modal.error({title: "请求失败", content: err});
                    });
            },
            remember() {
                let classNameList = document.getElementById("remember").getAttribute("class").split(" ");
                let newClassNameList = [];
                if (classNameList.includes("layui-form-checked")) {
                    newClassNameList = classNameList.filter(element => element !== "layui-form-checked");
                    this.login.remember = "0";
                } else {
                    classNameList.push("layui-form-checked");
                    newClassNameList = classNameList;
                    this.login.remember = "1";
                }
                let classNameListStr = newClassNameList.join(" ");
                document.getElementById("remember").setAttribute("class", classNameListStr);
                // this.$Modal.info({title: "记住密码", content: classNameListStr});
                // let remember = document.querySelector("input[type=text][name=remember]").getAttribute("value");
                // this.$Modal.info({title: "记住密码", content: remember});
            },
        },
        /**
         * Vue选项：filters过滤器
         * https://v2.vuejs.org/v2/guide/filters.html?redirect=true
         *
         * 过滤器是一种在模板中处理数据的便捷方式，它们特别适合对 字符串 和 数字 以及 日期 进行简单的显示变化。
         */
        filters: {},
        /**
         * 每次进入路由时，都会触发beforeRouteEnter。beforeRouteEnter一般会配合keep-alive使用。
         *
         * @param to 跳转到哪个页面
         * @param from 从哪个页面跳转
         * @param next 相当于一个按钮开启一样
         */
        beforeRouteEnter(to, from, next) {
            console.log("beforeRouteEnter");
            next();
        },
        /**
         * 离开路由之前执行的函数，可用于页面的反向传值，页面跳转。
         * @param to 跳转到哪个页面
         * @param from 从哪个页面跳转
         * @param next 相当于一个按钮开启一样
         */
        beforeRouteLeave(to, from, next) {
            console.log("beforeRouteLeave");
            next();
        },
        /**
         * 页面切换路由会触发 activated 钩子函数。
         * activated 是组件被激活后的钩子函数，每次回到页面都会执行。
         */
        activated() {
            console.log("activated");
        },
        /**
         * vue实例销毁之前调用
         */
        beforeDestroy() {
        },
    };
</script>

<style lang="less" scoped>
    // 默认字体大小
    div, span, p {
        font-size: 14px;
    }
    a {
        font-size: 14px;
    }
</style>
